<template>
  <div>
    <!-- 搜索栏区域 -->
    <el-card class="SearchCard" body-style="padding:0px">
      <el-row>
        <el-col :span="2">
          <div class="SearchTitle">条件搜索栏</div>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">搜索关键字</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-input placeholder="请输入内容" v-model="queryInfo.srm" clearable @clear="clearEvent"></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">是否配对</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-select v-model="queryInfo.match_state" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button size="medium" type="primary" @click="getSearchList()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="TableCard" :body-style="{ padding: '0px' }">
      <div>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ 'text-align':'center',background: '#3F9DFD', color: '#FFF' }"
          :cell-style="{'text-align':'center'}"
          size="medium"
          stripe
          style="width: 100%;font-size:12px"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <el-button type="text" @click="showRouteDia(scope.row.id)">配对</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="gyfsdm" label="医院给药途径编码"></el-table-column>
          <el-table-column prop="gyfsmc" label="医院给药途径名称" width="220"></el-table-column>
          <el-table-column prop="mdhsRouteName" label="配对给药途径名称"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.sylx"
                size="small"
                placeholder="请选择"
                @change="changeLX(scope.row.id, $event)"
              >
                <el-option
                  v-for="item in LXoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="缩写">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.sx"
                size="small"
                placeholder="请选择"
                @change="changeSX(scope.row.id, $event)"
              >
                <el-option
                  v-for="item in SXoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否皮试">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.sfps"
                size="small"
                placeholder="请选择"
                @change="changePS(scope.row.id, $event)"
              >
                <el-option
                  v-for="item in PSoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="matchState" label="配对状态">
            <!-- -1表示无法配对 0 表示未配对 1已配对，为空表示全部 -->
            <template
              slot-scope="scope"
            >{{(scope.row.matchState==-1)?"无法配对":(scope.row.matchState==0)?"未配对":(scope.row.matchState==1)?"已配对":""}}</template>
          </el-table-column>
          <el-table-column prop="match_user" label="配对人员/时间"></el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
          background
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="给药途径配对" :visible.sync="RouteVisible" width="50%" :before-close="handleClose">
      <el-card class="dialog-card">
        <div slot="header" class="Card_title">
          <span>本院给药途径信息</span>
        </div>
        <div slot="header" class="Card_title" style="border-left:1.5px solid rgb(192, 192, 192);">
          <span>配对给药途径信息</span>
        </div>
        <div class="Card_body">
          <el-form
            :inline="true"
            :model="RouteDiaData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="给药途径名称">
              <el-input v-model="RouteDiaData.RouteData.gyfsmc" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="Card_body" style="border-left:1.5px solid rgb(192, 192, 192);">
          <el-form
            :inline="true"
            :model="RouteDiaData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="给药途径名称">
              <el-input v-model="RouteDiaData.RouteData.mdhsRouteName" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-card class="dialog-card2" style="margin-top: 12px;">
        <div class="Card_body2" style="height:40px">
          <el-form
            :inline="true"
            :model="RouteDiaData"
            style="margin-left:15px"
            class="demo-form-inline"
          >
            <el-form-item label="药品信息">
              <el-input v-model="RouteDiaData.DialogSearchInp" size="mini" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getDialogRouteSearchList()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="RouteDiaData.RouterTabletData"
          height="250"
          border
          size="mini"
          style="width: 100%"
        >
          <el-table-column label width="35">
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="RouteDiaData.mdhsRouteId">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="routeId" label="给药途径编码" width="180"></el-table-column>
          <el-table-column prop="routeName" label="给药途径名称" width></el-table-column>
        </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="open">给药途径无法配对</el-button>
        <el-button type="success" size="mini" @click="SaveEditMatch">保存配对</el-button>
        <el-button size="mini" @click="dialogMatchVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDictRoute,
  EditDictSylx,
  EditDictSX,
  EditDictPS,
  getDictSylxList,
  getDictSXList,
  getDictRouteData,
  getDictSearchList,
  SaveEditMatch,
  SaveEditNoMatch
} from "@/api/rad";
export default {
  data() {
    return {
      queryInfo: {
        srm: "",
        match_state: "",
        page: 1,
        pageSize: 20
      },
      total: 0,
      tableData: [],
      dialogVisible: false,
      addRuleAdultData: {
        drugCode: "",
        drugName: "",
        routeIds: "",
        routeType: "",
        routeDesc: "",
        ageLow: "",
        unequalLow: "",
        ageLowUnit: "",
        ageHigh: "",
        unequalHigh: "",
        ageHighUnit: "",
        slCode: "",
        warning: "",
        abstractDesc: ""
      },
      // -1表示无法配对 0 表示未配对 1已配对，为空表示全部
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "已经配对"
        },
        {
          value: "0",
          label: "未配对"
        },
        {
          value: "-1",
          label: "无法配对"
        }
      ],
      // (1 口服，2 注射(全身)，3 注射(局部)，4 外用，5其他(全身)，6其他(局部))
      LXoptions: [],
      // (1 po 2 im 3 iv 4 ivgtt 5 iv drip 6 眼用 7 外用 8 其他)
      SXoptions: [
        // {
        //   value: 1,
        //   label: "po"
        // },
        // {
        //   value: 2,
        //   label: "im"
        // },
        // {
        //   value: 3,
        //   label: "iv"
        // },
        // {
        //   value: 4,
        //   label: "ivgtt"
        // },
        // {
        //   value: 5,
        //   label: "iv drip"
        // },
        // {
        //   value: 6,
        //   label: "眼用"
        // },
        // {
        //   value: 7,
        //   label: "外用"
        // },
        // {
        //   value: 8,
        //   label: "其他"
        // }
      ],
      PSoptions: [
        {
          value: 0,
          label: "否"
        },
        {
          value: 1,
          label: "是"
        }
      ],
      RouteVisible: false,
      RouteDiaData: {
        RouteData: [],
        DialogSearchInp: "",
        RouterTabletData: [],
        mdhsRouteId: []
      }
    };
  },
  created: function() {
    this.getDictRoute();
    this.getSylxList();
    this.getSXList();
  },
  methods: {
    handleClose(done) {
      done();
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getDictRoute();
    },

    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getDictRoute();
    },
    async getDictRoute() {
      let res = await this.$rad.getDictRoute({
        srm: this.queryInfo.srm,
        match_state: this.queryInfo.match_state,
        page: this.queryInfo.page,
        pageSize: this.queryInfo.pageSize
      });
      (this.tableData = res.rows), (this.total = res.total);
      // console.log(res.rows);
    },
    async getSylxList() {
      let res = await this.$rad.getDictSylxList({});
      // console.log(res);
      for (var i = 0; i < res.length; i++) {
        // console.log(i);
        this.LXoptions.push({
          value: res[i].index_code,
          label: res[i].index_name
        });
      }
      // console.log(this.LXoptions);
    },
    async getSXList() {
      let res = await this.$rad.getDictSXList({});
      // console.log(res);
      for (var i = 0; i < res.length; i++) {
        // console.log(i);
        this.SXoptions.push({
          value: res[i].index_code,
          label: res[i].index_name
        });
      }
      // console.log(this.LXoptions);
    },
    getSearchList() {
      this.getDictRoute();
    },
    clearEvent() {},
    async changeLX(id, e) {
      let res = await this.$rad.EditDictSylx({
        id: id,
        sylx: e
      });
      // console.log(res);
      if (res.code == 1) {
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "success",
          message: res.msg
        });
      }
    },
    async changeSX(id, e) {
      let res = await this.$rad.EditDictSX({
        id: id,
        sx: e
      });
      // console.log(res);
      if (res.code == 1) {
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "success",
          message: res.msg
        });
      }
    },
    async changePS(id, e) {
      let res = await this.$rad.EditDictPS({
        id: id,
        sfps: e
      });
      // console.log(res);
      if (res.code == 1) {
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "success",
          message: res.msg
        });
      }
    },
    showRouteDia(id) {
      this.RouteDiaData.id = id;
      this.RouteVisible = true;
      this.getDictRouteData();

      this.getDialogRouteSearchList();
    },
    async getDictRouteData() {
      let res = await this.$rad.getDictRouteData({
        id: this.RouteDiaData.id
      });
      console.log(res);
      this.RouteDiaData.RouteData = res;
      this.RouteDiaData.DialogSearchInp = this.RouteDiaData.RouteData.gyfsmc;
    },
    async getDialogRouteSearchList() {
      let res = await this.$rad.getDictSearchList({
        srm: this.RouteDiaData.DialogSearchInp,
        id: this.RouteDiaData.id
      });

      this.RouteDiaData.RouterTabletData = res;
      console.log(res);
    },
    async SaveEditMatch() {
      if (this.RouteDiaData.mdhsRouteId.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择配对给药途径"
        });
      } else {
        let res = await this.$rad.SaveEditMatch({
          id: this.RouteDiaData.id,
          mdhsRouteId: this.RouteDiaData.mdhsRouteId
        });
        if (res.code == 1) {
          this.RouteVisible = false;
          this.getDictRoute();

          console.log(this.RouteDiaData.mdhsRouteId);

          return this.$message({
            type: "success",
            message: res.msg
          });
        } else {
          return this.$message({
            type: "error",
            message: res.msg
          });
        }
      }
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.SaveEditNoMatch();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async SaveEditNoMatch() {
      let res = await this.$rad.SaveEditMatch({
        id: this.RouteDiaData.id
      });
      if (res.code == 1) {
        this.RouteVisible = false;
        this.getDictRoute();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  }
};
</script>
<style scoped>
.SearchCard {
  height: 50px;
  font-size: 12px;
}
.SearchTitle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #c2c2c2;
}
.SearchLable {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.TableCard {
  margin-left: 3px;
  margin-top: 2px;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
/* dialog样式 */
.dialog-card >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 50px;
  display: flex;
  flex: 1;
  /* background-color: red; */
}
.dialog-card >>> .el-card__header {
  padding: 0px 0px;
  display: flex;
  flex: 1;
}
.dialog-card >>> .Card_title {
  width: 50%;
  height: 25px;
  background-color: #c6e2ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-card >>> .Card_body {
  width: 50%;
  /* margin-left: 15px; */
  margin-right: 15px;
}
.dialog-card2 >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 300px;

  /* background-color: red; */
}
.dialog-card2 >>> .dialogSearch {
  height: 50px;
  display: flex;
  align-items: center;
}
</style>